<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="平台" prop="platform">
                            <el-select v-model="condition.search.platform"
                                       placeholder="平台">
                                <el-option label="点评"
                                           value="DP"></el-option>
                                <el-option label="抖音"
                                           value="DY"></el-option>
                                <el-option label="小红书"
                                           value="XHS"></el-option>
                                <el-option label="微博"
                                           value="WB"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="昵称" prop="nickName">
                            <el-input v-model="condition.search.nickName"
                                      placeholder="昵称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-form-item label="评级" prop="rating">
                        <el-select v-model="condition.search.rating"
                                   placeholder="评级">
                            <el-option label="8W粉+(S级)"
                                       value="S"></el-option>
                            <el-option label="5-8W粉(A级)"
                                       value="A"></el-option>
                            <el-option label="3-5W粉(B级)"
                                       value="B"></el-option>
                            <el-option label="1-3W粉(C级)"
                                       value="C"></el-option>
                            <el-option label="5千-1W粉(D级)"
                                       value="D"></el-option>
                            <el-option label="1千-5千粉(E级)"
                                       value="E"></el-option>
                            <el-option label="0-1千粉(F级)"
                                       value="F"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-col :span=6>
                        <el-form-item label="年龄" prop="age">
                            <el-select v-model="condition.search.age"
                                       placeholder="年龄">
                                <el-option label="20岁以下"
                                           value="UNDER20"></el-option>
                                <el-option label="20到30岁"
                                           value="BETWEEN20AND30"></el-option>
                                <el-option label="30到40岁"
                                           value="BETWEEN30AND40"></el-option>
                                <el-option label="40到50岁"
                                           value="BETWEEN40AND50"></el-option>
                                <el-option label="50岁以上"
                                           value="UPPER50"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="联系电话" prop="mobileNo">
                            <el-input v-model="condition.search.mobileNo"
                                      placeholder="联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="联系微信" prop="wechat">
                            <el-input v-model="condition.search.wechat"
                                      placeholder="微信"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="是否黑名单" prop="blackFlag">
                            <el-select v-model="condition.search.blackFlag"
                                       placeholder="是否黑名单">
                                <el-option label="是" value="true"></el-option>
                                <el-option label="否" value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="是否颜值探店" prop="faceFlag">
                            <el-select v-model="condition.search.faceFlag"
                                       placeholder="是否颜值探店">
                                <el-option label="是" value="true"></el-option>
                                <el-option label="否" value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="this.platform === 'DP'">
                    <el-col>
                        <el-form-item label="是否红V作者" prop="redFlag">
                            <el-select v-model="condition.search.redFlag"
                                       placeholder="是否红V作者">
                                <el-option label="是" value="true"></el-option>
                                <el-option label="否" value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item v-if="this.platform === 'DP'">
                            <el-button type="success" v-on:click="dpKolDialogVisible = true">快速新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" v-on:click="homeFlag = !homeFlag">
                                {{ homeFlag ? '隐藏主页链接' : '显示主页链接' }}
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" v-on:click="avatarFlag = !avatarFlag">
                                {{ avatarFlag ? '隐藏头像' : '显示头像' }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            ref="mainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="50">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="id"
                label="唯一ID">
            </el-table-column>
            <el-table-column
                prop="platform"
                :formatter="formatPlatform"
                width="60"
                label="平台">
            </el-table-column>
            <el-table-column
                prop="nickName"
                label="昵称">
                <template v-slot="scope">
                    <a :href="scope.row.url" target="_blank">
                        {{ scope.row.nickName }}
                    </a>
                </template>
            </el-table-column>
            <el-table-column
                v-if="homeFlag"
                prop="url"
                label="主页链接">
            </el-table-column>
            <el-table-column
                v-if="platform === 'DP'"
                prop="level"
                width="60"
                label="等级">
                <template v-slot="scope">
                    <span v-if="scope.row.level">
                        LV{{ scope.row.level }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="platform === 'DY'"
                prop="level"
                width="80"
                label="带货等级">
                <template v-slot="scope">
                    <span v-if="scope.row.level">
                        LV{{ scope.row.level }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="rating"
                :formatter="formatRating"
                label="评级">
            </el-table-column>
            <el-table-column
                v-if="avatarFlag"
                prop="avatar"
                label="头像">
                <template v-slot="scope">
                    <el-image v-if="scope.row.avatar"
                              style="width: 40px; height: 40px"
                              :src="scope.row.avatar"
                              :preview-src-list="avatarUrls"
                              fit="fill">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                sortable
                width="100"
                prop="fansCount"
                :sort-method="(val1, val2) => sortCount(val1, val2, 'fansCount')"
                label="粉丝数量">
            </el-table-column>
            <el-table-column
                sortable
                width="100"
                prop="followCount"
                :sort-method="(val1, val2) => sortCount(val1, val2, 'followCount')"
                label="关注数量">
            </el-table-column>
            <el-table-column
                v-if="platform === 'DP'"
                sortable
                width="100"
                prop="readCount"
                label="阅读数量">
            </el-table-column>
            <el-table-column
                sortable
                width="100"
                prop="flowerCount"
                :sort-method="(val1, val2) => sortCount(val1, val2, 'flowerCount')"
                label="获赞数量">
            </el-table-column>
            <el-table-column
                v-if="platform === 'DP'"
                sortable
                width="120"
                prop="fansActivity"
                label="粉丝活跃度">
            </el-table-column>
            <el-table-column
                v-if="platform === 'DP'"
                sortable
                width="120"
                prop="flowerActivity"
                label="阅读获赞比">
            </el-table-column>
            <el-table-column
                prop="gender"
                width="60"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="city"
                width="60"
                label="城市">
            </el-table-column>
            <el-table-column
                prop="age"
                :formatter="formatAge"
                label="年龄">
            </el-table-column>
            <el-table-column
                prop="faceFlag"
                :formatter="formatBoolean"
                label="颜值探店">
            </el-table-column>
            <el-table-column
                v-if="platform === 'DP'"
                prop="redFlag"
                :formatter="formatBoolean"
                label="红V作者">
            </el-table-column>
            <el-table-column
                prop="blackFlag"
                :formatter="formatBoolean"
                label="黑名单">
            </el-table-column>
            <el-table-column
                prop="wechat"
                label="联系微信">
            </el-table-column>
            <el-table-column
                sortable
                width="100"
                prop="marketPrice"
                :sort-method="(val1, val2) => sortCount(val1, val2, 'marketPrice')"
                label="达人报价">
            </el-table-column>
            <el-table-column
                prop="comment"
                label="评论">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="160">
                <template v-slot="scope">
                    <div>
                        <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">完善资料</el-button>
                        <el-button @click="onDetail(scope.row)" type="text" size="small">详情</el-button>
                        <el-button @click="onRefresh(scope.row)" type="text" size="small">刷新</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[50, 100, 200, 500, 1000]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>

        <el-dialog title="新增点评达人" width="30%" :visible.sync="dpKolDialogVisible">
            <el-form :model="dpKolForm" label-width="120px" :size="size">
                <el-form-item label="达人主页链接">
                    <el-input v-model="dpKolForm.url" type="textarea" placeholder="达人主页链接"></el-input>
                    <div class="form-tips">大众点评APP，个人主页分享</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dpKolDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="addDpKolConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-drawer direction="rtl" :title=addOrUpdateDialogTitle width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="平台">
                    <el-select v-model="addOrUpdateForm.platform" :disabled="disabled"
                               placeholder="平台">
                        <el-option label="点评"
                                   value="DP"></el-option>
                        <el-option label="抖音"
                                   value="DY"></el-option>
                        <el-option label="小红书"
                                   value="XHS"></el-option>
                        <el-option label="微博"
                                   value="WB"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主页链接" v-if="addOrUpdateForm.platform">
                    <el-input v-model="addOrUpdateForm.url" :disabled="disabled"
                              type="textarea"
                              placeholder="主页链接"></el-input>
                </el-form-item>
                <el-form-item label="评级">
                    <el-select v-model="addOrUpdateForm.rating"
                               placeholder="评级">
                        <el-option label="8W粉+(S级)"
                                   value="S"></el-option>
                        <el-option label="5-8W粉(A级)"
                                   value="A"></el-option>
                        <el-option label="3-5W粉(B级)"
                                   value="B"></el-option>
                        <el-option label="1-3W粉(C级)"
                                   value="C"></el-option>
                        <el-option label="5千-1W粉(D级)"
                                   value="D"></el-option>
                        <el-option label="1千-5千粉(E级)"
                                   value="E"></el-option>
                        <el-option label="0-1千粉(F级)"
                                   value="F"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="昵称" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform !== 'DP'">
                    <el-input v-model="addOrUpdateForm.nickName"
                              placeholder="昵称"></el-input>
                </el-form-item>
                <el-form-item label="带货等级" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform === 'DY'">
                    <el-input v-model="addOrUpdateForm.level"
                              placeholder="带货等级"></el-input>
                </el-form-item>
                <el-form-item label="关注数量" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform !== 'DP'">
                    <el-input v-model="addOrUpdateForm.followCount"
                              placeholder="关注数量"></el-input>
                </el-form-item>
                <el-form-item label="粉丝数量" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform !== 'DP'">
                    <el-input v-model="addOrUpdateForm.fansCount"
                              placeholder="粉丝数量"></el-input>
                </el-form-item>
                <el-form-item label="阅读数量"
                              v-if="addOrUpdateForm.platform && addOrUpdateForm.platform !== 'DP' && addOrUpdateForm.platform !== 'DY' && addOrUpdateForm.platform !== 'XHS'">
                    <el-input v-model="addOrUpdateForm.readCount"
                              placeholder="阅读数量"></el-input>
                </el-form-item>
                <el-form-item label="获赞数量" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform !== 'DP'">
                    <el-input v-model="addOrUpdateForm.flowerCount"
                              placeholder="获赞数量"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-select v-model="addOrUpdateForm.age"
                               placeholder="年龄">
                        <el-option label="20岁以下"
                                   value="UNDER20"></el-option>
                        <el-option label="20到30岁"
                                   value="BETWEEN20AND30"></el-option>
                        <el-option label="30到40岁"
                                   value="BETWEEN30AND40"></el-option>
                        <el-option label="40到50岁"
                                   value="BETWEEN40AND50"></el-option>
                        <el-option label="50岁以上"
                                   value="UPPER50"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="城市" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform !== 'DP'">
                    <el-input v-model="addOrUpdateForm.city"
                              placeholder="城市"></el-input>
                </el-form-item>
                <el-form-item label="擅长领域">
                    <el-input v-model="addOrUpdateForm.specialize"
                              placeholder="擅长领域"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="addOrUpdateForm.mobileNo"
                              placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item label="联系微信">
                    <el-input v-model="addOrUpdateForm.wechat"
                              placeholder="微信"></el-input>
                </el-form-item>
                <el-form-item label="是否颜值探店">
                    <el-switch v-model="addOrUpdateForm.faceFlag"></el-switch>
                </el-form-item>
                <el-form-item label="是否红V作者" v-if="addOrUpdateForm.platform && addOrUpdateForm.platform === 'DP'">
                    <el-switch v-model="addOrUpdateForm.redFlag"></el-switch>
                </el-form-item>
                <el-form-item label="是否黑名单">
                    <el-switch v-model="addOrUpdateForm.blackFlag"></el-switch>
                </el-form-item>
                <el-form-item label="达人报价">
                    <el-input v-model="addOrUpdateForm.marketPrice"
                              placeholder="达人报价"></el-input>
                </el-form-item>
                <el-form-item label="评论">
                    <el-input v-model="addOrUpdateForm.comment"
                              type="textarea"
                              placeholder="评论"></el-input>
                </el-form-item>
            </el-form>
            <div class="drawer-footer">
                <el-button class="drawer-footer-button" @click="addOrUpdateDialogVisible = false" size="small">取 消
                </el-button>
                <el-button class="drawer-footer-button" @click="addOrUpdateConfirm" type="primary" size="small">确 定
                </el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import {addKol, addKolFromDp, deleteKol, getKolByPage, refreshKol, updateKol} from '@/api/api'

export default {
    name: "kol",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 50,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},
            // 默认small
            size: 'small',
            // 不显示主页链接
            homeFlag: false,
            // 不显示头像
            avatarFlag: false,
            // 禁用
            disabled: false,
            // 头像数组
            avatarUrls: [],

            dpKolForm: {},
            dpKolDialogVisible: false,
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        platform: String,
    },
    methods: {
        sortCount(val1, val2, prop) {
            let i1 = this.convertNumber(val1[prop]);
            let i2 = this.convertNumber(val2[prop]);
            return i1 - i2;
        },
        convertNumber(val) {
            let result = 0;
            if (val) {
                if (typeof val === 'string') {
                    if (val.indexOf("W") !== -1 || val.indexOf("w") !== -1) {
                        result = Number(val.replace("W", "").replace("w", "")) * 10000
                    } else {
                        result = Number(val);
                    }
                } else if (typeof val === 'number') {
                    result = val;
                }
            }
            return result;
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue === undefined) {
                return null;
            }
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatRating: function (row, column, cellValue) {
            if (cellValue === undefined) {
                return null;
            }
            if (cellValue === 'S') {
                return "8W粉+(S级)";
            } else if (cellValue === 'A') {
                return "5-8W粉(A级)";
            } else if (cellValue === 'B') {
                return "3-5W粉(B级)";
            } else if (cellValue === 'C') {
                return "1-3W粉(C级)";
            } else if (cellValue === 'D') {
                return "5千-1W粉(D级)";
            } else if (cellValue === 'E') {
                return "1千-5千粉(E级)";
            } else if (cellValue === 'F') {
                return "0-1千粉(F级)";
            } else {
                return "未知";
            }
        },
        formatPlatform: function (row, column, cellValue) {
            if (cellValue === 'XHS') {
                return "小红书";
            } else if (cellValue === 'WB') {
                return "微博";
            } else if (cellValue === 'DP') {
                return "点评";
            } else if (cellValue === 'DY') {
                return "抖音";
            } else {
                return "未知";
            }
        },
        formatAge: function (row, column, cellValue) {
            if (!cellValue) {
                return null;
            }
            if (cellValue === 'UNDER20') {
                return "20岁以下";
            } else if (cellValue === 'BETWEEN20AND30') {
                return "20到30岁";
            } else if (cellValue === 'BETWEEN30AND40') {
                return "30到40岁";
            } else if (cellValue === 'BETWEEN40AND50') {
                return "40到50岁";
            } else if (cellValue === 'UPPER50') {
                return "50岁以上";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            this.disabled = false;
            if (this.platform) {
                this.addOrUpdateForm.platform = this.platform;
            }
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
            this.disabled = true;
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '达人数据.xlsx');
        },
        add: function () {
            addKol(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateKol(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        onDetail: function (row) {
            this.$router.push({path: '/k/kol/detail', query: {id: row.id}});
        },
        onRefresh: function (row) {
            this.$confirm('请确认是否刷新, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                refreshKol(row).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '刷新成功!'
                        });
                        this.getData();
                    } else {

                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteKol({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        addDpKolConfirm: function () {
            addKolFromDp(this.dpKolForm).then(data => {
                this.dpKolDialogVisible = false;
                this.getData();
            });
        },
        // 获取表格数据
        getData: function () {
            if (this.platform) {
                this.condition.search.platform = this.platform;
            }
            getKolByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                this.tableData.forEach((item, index, arr) => {
                    this.avatarUrls.push(item.avatar);
                })
            });
        },
    },
    beforeUpdate() {
        this.$nextTick(() => {
            // 在数据加载完，重新渲染表格
            this.$refs['mainTable'].doLayout();
        })
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
